<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行交易记录管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            overflow-x: hidden;
        }

        .app-container {
            display: flex;
            min-height: 100vh;
            width: 100%;
        }

        .sidebar {
            width: 250px;
            background: linear-gradient(to bottom, #1a3a6c, #2c5a8d);
            color: #fff;
            padding: 30px 0;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
        }

        .logo-container {
            padding: 0 25px 25px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 20px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-icon {
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #1a3a6c;
            font-weight: bold;
        }

        .logo-text {
            font-size: 20px;
            font-weight: 600;
        }

        .user-info {
            display: flex;
            align-items: center;
            padding: 20px 25px;
            gap: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 20px;
        }

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ffcc00;
            color: #1a3a6c;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 20px;
        }

        .user-details {
            flex: 1;
        }

        .user-name {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 16px;
        }

        .user-account {
            font-size: 13px;
            opacity: 0.8;
        }

        .sidebar-menu {
            padding: 0 15px;
            flex-grow: 1;
        }

        .menu-item {
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            transition: all 0.2s;
            border-radius: 8px;
            margin-bottom: 8px;
        }

        .menu-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .menu-item.active {
            background: rgba(255, 255, 255, 0.15);
            border-left: 4px solid #ffcc00;
        }

        .menu-item i {
            font-size: 18px;
            width: 24px;
            text-align: center;
        }

        .menu-text {
            font-size: 15px;
        }

        /* 右侧内容区样式 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
        }

        .topbar {
            background-color: white;
            padding: 0 30px;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid #eee;
            flex-shrink: 0;
        }

        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #1a3a6c;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .page-title i {
            background-color: #1a3a6c;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .current-time {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }

        .content-area {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            background-color: #f8fafc;
        }

        .section-title {
            font-size: 20px;
            color: #1a3a6c;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #1a3a6c;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-title i {
            color: #1a3a6c;
        }

        /* 修复和添加的样式 */
        .filters-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            padding: 25px;
            margin-bottom: 30px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            align-items: flex-end;
        }

        .filter-group {
            flex: 1;
            min-width: 200px;
        }

        .filter-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #444;
            font-size: 15px;
        }

        .filter-label i {
            margin-right: 8px;
            color: #1a3a6c;
        }

        .filter-select, .filter-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 15px;
            background-color: white;
            transition: all 0.3s ease;
        }

        .filter-select:focus, .filter-input:focus {
            border-color: #1a3a6c;
            box-shadow: 0 0 0 3px rgba(26, 58, 108, 0.1);
            outline: none;
        }

        .btn-filter {
            background-color: #1a3a6c;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 25px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            white-space: nowrap;
        }

        .btn-filter:hover {
            background-color: #15315a;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(26, 58, 108, 0.2);
        }

        .data-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            padding: 25px;
            position: relative;
            min-height: 300px;
        }

        .loading {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: #1a3a6c;
            border-radius: 12px;
            z-index: 10;
        }

        .loading i {
            margin-right: 10px;
            font-size: 24px;
        }

        .transactions-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 15px;
        }

        .transactions-table th {
            background-color: #f0f4f9;
            color: #1a3a6c;
            font-weight: 600;
            text-align: left;
            padding: 15px;
            border-bottom: 2px solid #dde4ee;
        }

        .transactions-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .transactions-table tr:hover {
            background-color: #f8fafc;
        }

        .transaction-type {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }

        .type-deposit {
            background-color: #e8f5e9;
            color: #2e7d32;
        }

        .type-withdraw {
            background-color: #ffebee;
            color: #c62828;
        }

        .type-transfer {
            background-color: #e3f2fd;
            color: #1565c0;
        }

        .amount-positive {
            color: #2e7d32;
            font-weight: 600;
        }

        .amount-negative {
            color: #c62828;
            font-weight: 600;
        }

        .status {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .status-success .status-indicator {
            background-color: #4caf50;
        }

        .status-pending .status-indicator {
            background-color: #ff9800;
        }

        .status-failed .status-indicator {
            background-color: #f44336;
        }

        .view-details {
            background-color: #f0f4f9;
            border: 1px solid #dde4ee;
            color: #1a3a6c;
            padding: 8px 15px;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .view-details:hover {
            background-color: #e0e8f0;
            border-color: #1a3a6c;
            color: #15315a;
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 30px;
            gap: 10px;
        }

        .page-btn {
            background-color: white;
            border: 1px solid #dde4ee;
            color: #1a3a6c;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .page-btn:hover:not(.disabled) {
            background-color: #f0f4f9;
            border-color: #1a3a6c;
        }

        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .page-btn.active {
            background-color: #1a3a6c;
            color: white;
            border-color: #1a3a6c;
        }

        .footer {
            background-color: #1a3a6c;
            color: rgba(255, 255, 255, 0.8);
            padding: 20px;
            text-align: center;
            font-size: 14px;
            flex-shrink: 0;
        }

        .footer p {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 交易详情模态框 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: white;
            border-radius: 12px;
            width: 90%;
            max-width: 600px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

        .modal-overlay.show .modal-content {
            transform: translateY(0);
        }

        .modal-header {
            padding: 20px 25px;
            background-color: #f0f4f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #dde4ee;
        }

        .modal-header h3 {
            color: #1a3a6c;
            font-size: 20px;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #777;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .modal-close:hover {
            background-color: #e0e8f0;
            color: #c62828;
        }

        .modal-body {
            padding: 30px;
        }

        .detail-row {
            display: flex;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f4f9;
        }

        .detail-row:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .detail-label {
            width: 120px;
            font-weight: 600;
            color: #555;
        }

        .detail-value {
            flex: 1;
            color: #333;
            font-size: 16px;
        }

        /* 响应式设计 */
        @media (max-width: 900px) {
            .app-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            .filters-container {
                flex-direction: column;
                align-items: stretch;
            }

            .filter-group {
                min-width: 100%;
            }

            .btn-filter {
                width: 100%;
                justify-content: center;
            }

            .topbar {
                padding: 0 20px;
                height: 70px;
                gap: 5px;
            }

            .page-title {
                font-size: 20px;
            }

            .content-area {
                padding: 20px;
            }

            .transactions-table {
                display: block;
                overflow-x: auto;
            }

            .modal-content {
                width: 95%;
            }
        }

        @media (max-width: 576px) {
            .page-title i {
                width: 36px;
                height: 36px;
                font-size: 16px;
            }

            .detail-row {
                flex-direction: column;
                gap: 8px;
            }

            .detail-label {
                width: 100%;
            }
        }
    </style>
</head>
<body>
        <div class="app-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
            <div class="logo-container">
                <div class="logo">
                    <div class="logo-icon">
                        <i class="fas fa-university"></i>
                    </div>
                    <div class="logo-text">银行系统</div>
                </div>
            </div>

            <div class="user-info">
                <div class="avatar" id="user-avatar"></div>
                <div class="user-details">
                    <div class="user-name" id="user-name"></div>
                    <div class="user-account" id="formatted-account"></div>
                </div>
            </div>
            <div class="sidebar-menu">
                <div class="menu-item" onclick="location.href='../user_home.html';">
                    <i class="fas fa-wallet"></i>
                    <div class="menu-text">账户信息</div>
                </div>
                <div class="menu-item" onclick="location.href='Deposit.html';">
                    <i class="fas fa-money-bill-wave"></i>
                    <div class="menu-text">存款</div>
                </div>
                <div class="menu-item" onclick="location.href='Withdraw money.html';">
                    <i class="fas fa-hand-holding-usd"></i>
                    <div class="menu-text">取款</div>
                </div>
                <div class="menu-item" onclick="location.href='Transfer.html';">
                    <i class="fas fa-exchange-alt"></i>
                    <div class="menu-text">转账</div>
                </div>
                <div class="menu-item" onclick="location.href='AccountLost.html';">
                    <i class="fas fa-lock"></i>
                    <div class="menu-text">账户挂失</div>
                </div>
                <div class="menu-item" onclick="location.href='ChangePassword.html';">
                    <i class="fas fa-key"></i>
                    <div class="menu-text">修改密码</div>
                </div>
                <div class="menu-item active">
                    <i class="fas fa-history"></i>
                    <div class="menu-text">交易记录</div>
                </div>
                <div class="menu-item" id="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    <div class="menu-text">安全退出</div>
                </div>
            </div>
        </div>

            <div class="main-content">
                <div class="topbar">
                    <div class="page-title">
                        <i class="fas fa-exchange-alt"></i>
                        <span>交易记录查询</span>
                    </div>
                    <span class="current-time" id="current-time"></span>
                </div>

                <div class="content-area">
                    <div class="filters-container">
                        <div class="filter-group">
                            <label class="filter-label"><i class="fas fa-filter"></i> 交易类型</label>
                            <select class="filter-select" id="transaction-type">
                                <option value="all">全部交易类型</option>
                                <option value="存款">存款</option>
                                <option value="支取">取款</option>
                                <option value="转账">转账</option>
                            </select>
                        </div>

                        <div class="filter-group">
                            <label class="filter-label"><i class="fas fa-calendar"></i> 开始日期</label>
                            <input type="date" class="filter-input" id="start-date">
                        </div>

                        <div class="filter-group">
                            <label class="filter-label"><i class="fas fa-calendar"></i> 结束日期</label>
                            <input type="date" class="filter-input" id="end-date">
                        </div>

                        <button class="btn-filter" id="apply-filters">
                            <i class="fas fa-search"></i> 查询记录
                        </button>
                    </div>

                    <div class="data-container">
                        <div class="loading" id="loading-indicator" style="display: none;">
                            <i class="fas fa-spinner fa-spin"></i> 正在加载交易记录...
                        </div>

                        <table class="transactions-table">
                            <thead>
                                <tr>
                                    <th>交易日期</th>
                                    <th>交易类型</th>
                                    <th>交易金额</th>
                                    <th>对方账号</th>
                                    <th>交易状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="transactions-body">
                            </tbody>
                        </table>

                        <div class="pagination" id="pagination">
                            <button class="page-btn disabled"><i class="fas fa-chevron-left"></i> 上一页</button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn"><i class="fas fa-ellipsis-h"></i></button>
                            <button class="page-btn">5</button>
                            <button class="page-btn">下一页 <i class="fas fa-chevron-right"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 交易详情模态框 -->
        <div class="modal-overlay" id="transaction-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>交易详情</h3>
                    <button class="modal-close" id="close-modal">&times;</button>
                </div>
                <div class="modal-body" id="transaction-details">
                    <div class="detail-row">
                        <div class="detail-label">交易编号</div>
                        <div class="detail-value">TRX202311151428</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">交易日期</div>
                        <div class="detail-value">2023年11月15日 14:28:36</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">交易类型</div>
                        <div class="detail-value">转账</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">交易金额</div>
                        <div class="detail-value amount-negative">-¥1,500.00</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">交易状态</div>
                        <div class="detail-value">成功</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">交易描述</div>
                        <div class="detail-value">转账给李明，购买电子产品</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">对方账号</div>
                        <div class="detail-value">6225 8802 9876 5432</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">对方姓名</div>
                        <div class="detail-value">李明</div>
                    </div>
                    <div class="detail-row">
                        <div class="detail-label">交易渠道</div>
                        <div class="detail-value">手机银行</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>>
<script>
    // DOM元素引用
    const elements = {
        userAvatar: document.getElementById('user-avatar'),
        userName: document.getElementById('user-name'),
        formattedAccount: document.getElementById('formatted-account'),
        currentTime: document.getElementById('current-time'),
        transactionType: document.getElementById('transaction-type'),
        startDate: document.getElementById('start-date'),
        endDate: document.getElementById('end-date'),
        applyFiltersBtn: document.getElementById('apply-filters'),
        transactionsBody: document.getElementById('transactions-body'),
        pagination: document.getElementById('pagination'),
        loadingIndicator: document.getElementById('loading-indicator'),
        transactionModal: document.getElementById('transaction-modal'),
        closeModalBtn: document.getElementById('close-modal'),
        transactionDetails: document.getElementById('transaction-details')
    };

    // 全局状态
    const state = {
        userName: sessionStorage.getItem('userName') || '客户',
        userAccount: sessionStorage.getItem('cardID') || '',
        transactions: [], // 当前页交易数据
        total: 0,         // 总记录数
        pageSize: 10,
        currentPage: 1,   // 后端分页从1开始
        totalPages: 1,
        filters: {
            type: 'all',
            startDate: '',
            endDate: ''
        },
        loading: false,
        currentTime: ''
    };

    // 拉取交易数据（分页+筛选）
    async function fetchTransactions() {
        const cardID = state.userAccount;
        if (!cardID) {
            alert('请先登录系统');
            window.location.href = '../login.html';
            return;
        }
        elements.loadingIndicator.style.display = 'block';
        const params = {
            cardID,
            type: state.filters.type === 'all' ? '' : state.filters.type, // 直接传递后端需要的类型
            startDate: state.filters.startDate,
            endDate: state.filters.endDate,
            pageNum: state.currentPage,
            pageSize: state.pageSize
        };
        const query = Object.keys(params)
            .filter(k => params[k]) // 只拼接有值的参数
            .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`)
            .join('&');
        try {
            const response = await fetch(`http://localhost:8080/customer/getMyTracePage?${query}`);
            const result = await response.json();
            if (result.code === '200' && result.data) {
                state.transactions = (result.data.records || []).map(tran => formatTransaction(tran));
                state.total = result.data.total;
                state.pageSize = result.data.size;
                state.currentPage = result.data.current;
                state.totalPages = result.data.pages;
            } else {
                state.transactions = [];
                state.total = 0;
                state.totalPages = 1;
            }
        } catch (e) {
            state.transactions = [];
            state.total = 0;
            state.totalPages = 1;
            alert('获取交易记录失败');
        }
        elements.loadingIndicator.style.display = 'none';
        renderTransactions();
        renderPagination();
    }

    // 格式化后端返回的交易数据，适配前端渲染
    function formatTransaction(tran) {
        // 假设后端Tradeinfo结构：tradeID, cardID, tradeType, tradeMoney, tradeDate, remark, status, counterparty, counterpartyName, channel
        // tradeType: "存款"/"支取"/"转账"
        // status: "成功"/"处理中"/"失败"
        let type, typeText, amountClass, amountPrefix;
        if (tran.tradeType === '存款') {
            type = 'deposit';
            typeText = '存款';
            amountClass = 'amount-positive';
            amountPrefix = '+';
        } else if (tran.tradeType === '支取') {
            type = 'withdraw';
            typeText = '取款';
            amountClass = 'amount-negative';
            amountPrefix = '-';
        } else {
            type = 'transfer';
            typeText = '转账';
            amountClass = tran.tradeMoney < 0 ? 'amount-negative' : 'amount-positive';
            amountPrefix = tran.tradeMoney < 0 ? '-' : '+';
        }
        let status = 'success', statusText = '成功';
        if (tran.status === '处理中') {
            status = 'pending'; statusText = '处理中';
        } else if (tran.status === '失败') {
            status = 'failed'; statusText = '失败';
        }
        // 日期格式化
        let dateObj = new Date(tran.tradeDate);
        let displayDate = dateObj.getFullYear() + '-' + String(dateObj.getMonth()+1).padStart(2,'0') + '-' + String(dateObj.getDate()).padStart(2,'0');
        // 金额格式化
        let formattedAmount = Math.abs(tran.tradeMoney).toLocaleString('zh-CN', {minimumFractionDigits: 2});
        return {
            id: tran.tradeID || '',
            displayDate,
            type,
            typeText,
            amountClass,
            amountPrefix,
            formattedAmount,
            counterparty: tran.counterparty || '-',
            counterpartyName: tran.counterpartyName || '-',
            status,
            statusText,
            description: tran.remark || '-',
            channel: tran.channel || '-',
            date: tran.tradeDate // 用于筛选
        };
    }

    // 初始化函数
    function init() {
        // 设置初始用户信息
        elements.userAvatar.textContent = state.userName.charAt(0);
        elements.userName.textContent = state.userName;
        elements.formattedAccount.textContent = formatAccountNumber(state.userAccount);

        // 设置日期选择器的默认值
        const today = new Date();
        const oneMonthAgo = new Date();
        oneMonthAgo.setMonth(today.getMonth() - 1);

        elements.startDate.valueAsDate = oneMonthAgo;
        elements.endDate.valueAsDate = today;

        state.filters.startDate = formatDateForInput(oneMonthAgo);
        state.filters.endDate = formatDateForInput(today);

        // 更新时间
        updateTime();
        setInterval(updateTime, 1000);

        // 获取真实交易数据
        fetchTransactions();

        // 绑定事件
        elements.applyFiltersBtn.addEventListener('click', applyFilters);
        elements.closeModalBtn.addEventListener('click', () => {
            elements.transactionModal.classList.remove('show');
        });

        // 点击模态框外部关闭
        elements.transactionModal.addEventListener('click', (e) => {
            if (e.target === elements.transactionModal) {
                elements.transactionModal.classList.remove('show');
            }
        });
    }

    // 格式化账户号码
    function formatAccountNumber(account) {
        return account.replace(/(\d{4})(?=\d)/g, '$1 ');
    }

    // 格式化日期为YYYY-MM-DD格式
    function formatDateForInput(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }

    // 更新时间
    function updateTime() {
        const now = new Date();
        state.currentTime = now.toLocaleString('zh-CN', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        });
        elements.currentTime.innerHTML = `<i class="fas fa-clock"></i> ${state.currentTime}`;
    }

    // 应用筛选条件
    function applyFilters() {
        state.filters.type = elements.transactionType.value;
        state.filters.startDate = elements.startDate.value;
        state.filters.endDate = elements.endDate.value;
        state.currentPage = 1;
        fetchTransactions();
    }

    // 渲染交易记录表格
    function renderTransactions() {
        elements.transactionsBody.innerHTML = '';
        if (state.transactions.length === 0) {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td colspan="6" style="text-align: center; padding: 30px;">
                    <i class="fas fa-search" style="font-size: 48px; margin-bottom: 15px; color: #aaa;"></i>
                    <div style="font-size: 18px; color: #666;">没有找到符合条件的交易记录</div>
                </td>
            `;
            elements.transactionsBody.appendChild(row);
            return;
        }
        state.transactions.forEach(transaction => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${transaction.displayDate}</td>
                <td>
                    <span class="transaction-type type-${transaction.type}">
                        ${transaction.typeText}
                    </span>
                </td>
                <td class="${transaction.amountClass}">
                    ${transaction.amountPrefix}¥${transaction.formattedAmount}
                </td>
                <td>${transaction.counterparty}</td>
                <td class="status status-${transaction.status}">
                    <span class="status-indicator"></span>
                    ${transaction.statusText}
                </td>
                <td>
                    <button class="view-details" data-id="${transaction.id}">
                        查看详情
                    </button>
                </td>
            `;
            // 添加查看详情事件
            const viewBtn = row.querySelector('.view-details');
            viewBtn.addEventListener('click', () => viewDetails(transaction));
            elements.transactionsBody.appendChild(row);
        });
    }

    // 渲染分页控件
    function renderPagination() {
        elements.pagination.innerHTML = '';
        if (state.totalPages <= 1) return;
        // 上一页
        const prevBtn = document.createElement('button');
        prevBtn.className = 'page-btn';
        prevBtn.innerHTML = '<i class="fas fa-chevron-left"></i> 上一页';
        if (state.currentPage === 1) prevBtn.classList.add('disabled');
        prevBtn.addEventListener('click', () => {
            if (state.currentPage > 1) {
                state.currentPage--;
                fetchTransactions();
            }
        });
        elements.pagination.appendChild(prevBtn);
        // 页码按钮
        const maxVisiblePages = 5;
        let startPage, endPage;
        if (state.totalPages <= maxVisiblePages) {
            startPage = 1;
            endPage = state.totalPages;
        } else {
            const half = Math.floor(maxVisiblePages / 2);
            if (state.currentPage <= half) {
                startPage = 1;
                endPage = maxVisiblePages;
            } else if (state.currentPage >= state.totalPages - half) {
                startPage = state.totalPages - maxVisiblePages + 1;
                endPage = state.totalPages;
            } else {
                startPage = state.currentPage - half;
                endPage = state.currentPage + half;
            }
        }
        if (startPage > 1) {
            const firstBtn = document.createElement('button');
            firstBtn.className = 'page-btn';
            firstBtn.textContent = '1';
            firstBtn.addEventListener('click', () => {
                state.currentPage = 1;
                fetchTransactions();
            });
            elements.pagination.appendChild(firstBtn);
            if (startPage > 2) {
                const ellipsis = document.createElement('button');
                ellipsis.className = 'page-btn disabled';
                ellipsis.innerHTML = '<i class="fas fa-ellipsis-h"></i>';
                elements.pagination.appendChild(ellipsis);
            }
        }
        for (let i = startPage; i <= endPage; i++) {
            const pageBtn = document.createElement('button');
            pageBtn.className = 'page-btn';
            if (i === state.currentPage) pageBtn.classList.add('active');
            pageBtn.textContent = i;
            pageBtn.addEventListener('click', () => {
                state.currentPage = i;
                fetchTransactions();
            });
            elements.pagination.appendChild(pageBtn);
        }
        if (endPage < state.totalPages) {
            if (endPage < state.totalPages - 1) {
                const ellipsis = document.createElement('button');
                ellipsis.className = 'page-btn disabled';
                ellipsis.innerHTML = '<i class="fas fa-ellipsis-h"></i>';
                elements.pagination.appendChild(ellipsis);
            }
            const lastBtn = document.createElement('button');
            lastBtn.className = 'page-btn';
            lastBtn.textContent = state.totalPages;
            lastBtn.addEventListener('click', () => {
                state.currentPage = state.totalPages;
                fetchTransactions();
            });
            elements.pagination.appendChild(lastBtn);
        }
        // 下一页
        const nextBtn = document.createElement('button');
        nextBtn.className = 'page-btn';
        nextBtn.innerHTML = '下一页 <i class="fas fa-chevron-right"></i>';
        if (state.currentPage === state.totalPages) nextBtn.classList.add('disabled');
        nextBtn.addEventListener('click', () => {
            if (state.currentPage < state.totalPages) {
                state.currentPage++;
                fetchTransactions();
            }
        });
        elements.pagination.appendChild(nextBtn);
    }

    // 查看交易详情
    function viewDetails(transaction) {
        elements.transactionDetails.innerHTML = `
            <div class="detail-row">
                <div class="detail-label">交易编号</div>
                <div class="detail-value">${transaction.id}</div>
            </div>
            <div class="detail-row">
                <div class="detail-label">交易日期</div>
                <div class="detail-value">${transaction.displayDate}</div>
            </div>
            <div class="detail-row">
                <div class="detail-label">交易类型</div>
                <div class="detail-value">${transaction.typeText}</div>
            </div>
            <div class="detail-row">
                <div class="detail-label">交易金额</div>
                <div class="detail-value ${transaction.amountClass}">
                    ${transaction.amountPrefix}¥${transaction.formattedAmount}
                </div>
            </div>
            <div class="detail-row">
                <div class="detail-label">交易状态</div>
                <div class="detail-value">${transaction.statusText}</div>
            </div>
            <div class="detail-row">
                <div class="detail-label">交易描述</div>
                <div class="detail-value">${transaction.description}</div>
            </div>
            ${transaction.counterparty !== '-' ? `
            <div class="detail-row">
                <div class="detail-label">对方账号</div>
                <div class="detail-value">${transaction.counterparty}</div>
            </div>
            <div class="detail-row">
                <div class="detail-label">对方姓名</div>
                <div class="detail-value">${transaction.counterpartyName}</div>
            </div>
            ` : ''}
            <div class="detail-row">
                <div class="detail-label">交易渠道</div>
                <div class="detail-value">${transaction.channel}</div>
            </div>
        `;
        elements.transactionModal.classList.add('show');
    }

    document.getElementById('logout-btn').addEventListener('click', function() {
            if(confirm('确定要退出系统吗？')) {
                sessionStorage.removeItem('cardID');
                sessionStorage.removeItem('userName');
                window.location.href = '../login.html';
            }
        });

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', init);
</script>

